<template>
  <div class="theme-color">
    <div class="mix-color_block">
      <div
        :style="`background-color: ${item};z-index:${index + 1} `"
        v-for="(item, index) in mix_color"
        :key="index"
      ></div>
    </div>
    <p>{{ title }}</p>
  </div>
</template>

<script>
export default {
  name: 'MixColorBlock',
  props: {
    mix_color: {
      default: []
    },
    title: {
      default: ''
    }
  },
  setup() {}
}
</script>

<style lang="scss" scoped>
$space_between: 9px;
.theme-color {
  cursor: pointer;
  transition: all 0.25s;
  .mix-color_block {
    position: relative;
    left: 0;
    width: 60px;
    height: 60px;
    div {
      position: absolute;
      width: 34px;
      height: 34px;
      border-radius: 50%;
    }
    div:first-child {
      left: 0;
      bottom: $space_between;
    }
    div:nth-child(2) {
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    div:last-child {
      right: 0;
      bottom: $space_between;
    }
  }
  p {
    text-align: center;
    font-size: 14px;
  }
  &:hover {
    transition: all 0.25s;
    transform: scale(1.1);
  }
}
</style>
